<script setup lang="ts">
import type { Ref } from 'vue'
import type { componentType } from '../componentPanel'
import type { FormBasicConfig } from '../type'
import { ElMessage } from 'element-plus'
import { inject } from 'vue'

const componentsPanel = inject('componentsPanel') as Ref<componentType[]>
const formBasicConfig = inject('formBasicConfig') as FormBasicConfig

const viewJson = computed(() => {
  return ({
    components: componentsPanel.value.map((item: any) => item.options),
    formBasicConfig,
  })
})

function copyJson() {
  const json = viewJson.value
  const input = document.createElement('input')
  input.value = json as any
  document.body.appendChild(input)
  input.select()
  document.execCommand('copy')
  document.body.removeChild(input)
  ElMessage.success('复制成功')
}
</script>

<template>
  <div class="w-full overflow-auto">
    <ElPopper>{{ viewJson }}</ElPopper>
  </div>
  <ElButton type="primary" @click="copyJson">
    复制JSON
  </ElButton>
</template>
